Added Aria Labels for buttons in CollectionsTable.jsx and DatabaseSidebar.jsx - #76
Conversation
Added aria-label for buttons in CollectionTable.jsx and DatabaseSidebar.jsx files
|
@aryansinha1908 is attempting to deploy a commit to the Yash Pouranik's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdded aria-label attributes to icon-only and interactive controls in three web-dashboard components to provide accessible names; no logic, state, event handlers, or rendering behavior were changed. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces aria-label attributes to several buttons in the CollectionTable and DatabaseSidebar components to enhance accessibility. The review feedback highlights that some labels are misleading or confusing; specifically, labels for editing and deleting rows were incorrectly named as 'Column' actions, and a sidebar toggle was labeled based on its CSS class rather than its function.
| className="btn-icon" | ||
| onClick={() => onEdit(info.row.original)} | ||
| onPointerDown={e => e.stopPropagation()} | ||
| aria-label="Edit Column" |
There was a problem hiding this comment.
The aria-label "Edit Column" is misleading because this button performs an action on a row (record), not a column. It should be updated to "Edit" or "Edit Row" to match the title attribute and the actual functionality.
| aria-label="Edit Column" | |
| aria-label="Edit" |
| className="btn-icon danger-hover" | ||
| onClick={() => onDelete(info.row.original._id)} | ||
| onPointerDown={e => e.stopPropagation()} | ||
| aria-label="Delete Column" |
There was a problem hiding this comment.
The aria-label "Delete Column" is incorrect as this button deletes a row (record). Please update it to "Delete" or "Delete Row" to provide accurate information for accessibility.
| aria-label="Delete Column" | |
| aria-label="Delete" |
| <div className="sidebar-actions"> | ||
| <button | ||
| className="btn-icon hide-desktop" | ||
| aria-label="Hide Desktop" |
There was a problem hiding this comment.
The aria-label "Hide Desktop" is confusing. This button is used to close the sidebar in mobile view. A more descriptive label like "Close Sidebar" should be used instead of referencing the CSS class name.
| aria-label="Hide Desktop" | |
| aria-label="Close Sidebar" |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/web-dashboard/src/components/CollectionTable.jsx (1)
193-203:⚠️ Potential issue | 🟡 MinorUse row-level aria labels for row actions.
On Line 193 and Line 202, the labels say “Column”, but these handlers act on row records. This gives screen-reader users the wrong action context.
Suggested fix
- aria-label="Edit Column" + aria-label="Edit Record" ... - aria-label="Delete Column" + aria-label="Delete Record"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web-dashboard/src/components/CollectionTable.jsx` around lines 193 - 203, The aria-labels on the row action buttons in CollectionTable.jsx are wrong (they say "Column") — update them to use row-level labels so screen readers get the correct context; change the aria-labels for the Edit and Delete buttons (where onClick uses onDelete(info.row.original._id) and the edit uses info.row) to something like "Edit row" and "Delete row" or include identifying row info (e.g., index or a row name from info.row.original) so the label refers to the specific row record rather than "Column".
🧹 Nitpick comments (1)
apps/web-dashboard/src/components/CollectionTable.jsx (1)
365-368: Add disclosure semantics to the column-menu toggle.Since this button opens/closes a menu, include
aria-expanded(and optionallyaria-haspopup) so assistive tech can announce state changes.Suggested improvement
<button className="btn btn-secondary btn-sm" aria-label="Show Column Menu" + aria-haspopup="menu" + aria-expanded={showColumnMenu} onClick={() => setShowColumnMenu(!showColumnMenu)}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web-dashboard/src/components/CollectionTable.jsx` around lines 365 - 368, The column-menu toggle button in CollectionTable.jsx currently toggles showColumnMenu via setShowColumnMenu but lacks disclosure semantics; update the button (the element using onClick={() => setShowColumnMenu(!showColumnMenu)}) to include aria-expanded={showColumnMenu} and aria-haspopup="menu" (and if a menu element has an id, add aria-controls="<menu-id>") so assistive tech can announce open/closed state and relation to the menu.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/web-dashboard/src/components/DatabaseSidebar.jsx`:
- Around line 33-34: The aria-label on the sidebar toggle is ambiguous ("Hide
Desktop"); update the control to use a clear close action label such as "Close
sidebar" or "Collapse sidebar" instead. Locate the element that calls
onClick={() => setIsSidebarOpen(false)} (the sidebar close button) and replace
aria-label="Hide Desktop" with a more descriptive string like aria-label="Close
sidebar" so screen readers convey the correct action.
---
Outside diff comments:
In `@apps/web-dashboard/src/components/CollectionTable.jsx`:
- Around line 193-203: The aria-labels on the row action buttons in
CollectionTable.jsx are wrong (they say "Column") — update them to use row-level
labels so screen readers get the correct context; change the aria-labels for the
Edit and Delete buttons (where onClick uses onDelete(info.row.original._id) and
the edit uses info.row) to something like "Edit row" and "Delete row" or include
identifying row info (e.g., index or a row name from info.row.original) so the
label refers to the specific row record rather than "Column".
---
Nitpick comments:
In `@apps/web-dashboard/src/components/CollectionTable.jsx`:
- Around line 365-368: The column-menu toggle button in CollectionTable.jsx
currently toggles showColumnMenu via setShowColumnMenu but lacks disclosure
semantics; update the button (the element using onClick={() =>
setShowColumnMenu(!showColumnMenu)}) to include aria-expanded={showColumnMenu}
and aria-haspopup="menu" (and if a menu element has an id, add
aria-controls="<menu-id>") so assistive tech can announce open/closed state and
relation to the menu.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 6e30dd16-5ef3-401c-b27c-97d5e8149df2
📒 Files selected for processing (2)
apps/web-dashboard/src/components/CollectionTable.jsxapps/web-dashboard/src/components/DatabaseSidebar.jsx
There was a problem hiding this comment.
Pull request overview
This PR improves accessibility in the web dashboard by adding accessible names (aria-label) to several buttons, primarily targeting icon-only controls in the collections UI.
Changes:
- Added
aria-labelattributes to icon buttons inDatabaseSidebar.jsx(close sidebar, create collection, delete collection). - Added
aria-labelattributes to action buttons inCollectionTable.jsx(view/edit/delete row actions, columns menu button).
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| apps/web-dashboard/src/components/DatabaseSidebar.jsx | Adds aria-labels to sidebar icon buttons and a “Create One” button. |
| apps/web-dashboard/src/components/CollectionTable.jsx | Adds aria-labels to row action buttons and the columns menu toggle. |
Comments suppressed due to low confidence (3)
apps/web-dashboard/src/components/DatabaseSidebar.jsx:61
- This button already has visible text (“Create One”), so adding
aria-label="Create New Collection"overrides the accessible name and can create a mismatch between what sighted users see and what assistive tech announces. Consider removing the aria-label here, or make it match the visible label.
<button
className="btn btn-secondary btn-sm"
aria-label="Create New Collection"
onClick={() =>
navigate(`/project/${projectId}/create-collection`)
}
>
Create One
</button>
apps/web-dashboard/src/components/CollectionTable.jsx:206
- The action buttons operate on a table row/record (see
onEdit(info.row.original)andonDelete(info.row.original._id)), but the aria-labels say “Edit Column” / “Delete Column”. These labels should describe the record/document action (e.g., edit/delete record) so screen readers get the correct meaning.
<button
className="btn-icon"
onClick={() => onEdit(info.row.original)}
onPointerDown={e => e.stopPropagation()}
aria-label="Edit Column"
title="Edit"
>
<Pencil size={15} />
</button>
<button
className="btn-icon danger-hover"
onClick={() => onDelete(info.row.original._id)}
onPointerDown={e => e.stopPropagation()}
aria-label="Delete Column"
title="Delete"
>
<Trash2 size={15} />
</button>
apps/web-dashboard/src/components/CollectionTable.jsx:380
- The “COLUMNS” button has visible text, so it already has an accessible name; the added
aria-label="Show Column Menu"is redundant and also misleading because the button toggles the menu (it should reflect show vs hide). Consider removing the aria-label, or making it stateful (and addingaria-expanded+aria-controlsfor the menu).
<button
className="btn btn-secondary btn-sm"
aria-label="Show Column Menu"
onClick={() => setShowColumnMenu(!showColumnMenu)}
style={{
display: 'flex',
alignItems: 'center',
gap: '8px',
fontSize: '0.8rem',
padding: '6px 12px',
background: showColumnMenu ? 'rgba(255,255,255,0.08)' : 'transparent'
}}
>
<Settings2 size={14} />
COLUMNS
</button>
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <div className="sidebar-actions"> | ||
| <button | ||
| className="btn-icon hide-desktop" | ||
| aria-label="Hide Desktop" |
There was a problem hiding this comment.
The close (X) icon button is labeled aria-label="Hide Desktop", but the click handler closes the sidebar (setIsSidebarOpen(false)). This label is confusing for screen reader users; rename it to describe the actual action (e.g., closing/hiding the collections sidebar), without referencing “desktop”.
| aria-label="Hide Desktop" | |
| aria-label="Close collections sidebar" |
|
@coderabbitai what to do? |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: Length of output: 44813
❌ Blocking Issues1.
|
| Current (wrong) | Should be |
|---|---|
aria-label="Edit Column" |
aria-label="Edit Record" |
aria-label="Delete Column" |
aria-label="Delete Record" |
3. Ambiguous aria-label in DatabaseSidebar.jsx
The sidebar close button currently says aria-label="Hide Desktop" — this references a CSS class name, not the action. It should be:
- aria-label="Hide Desktop"
+ aria-label="Close sidebar"4. Inconsistent indentation on new aria-label lines
The newly added aria-label attributes use tab characters while the surrounding code uses spaces. This should be reformatted to match the file's existing indentation style (applies to both CollectionTable.jsx and DatabaseSidebar.jsx).
⚠️ Minor / Nitpicks (good to fix)
5. Column menu toggle button missing disclosure semantics (CollectionTable.jsx)
The "COLUMNS" toggle button should also declare its open/closed state:
<button
aria-label="Show Column Menu"
+ aria-haspopup="menu"
+ aria-expanded={showColumnMenu}
onClick={() => setShowColumnMenu(!showColumnMenu)}
>6. aria-label on "Create One" button overrides visible text (DatabaseSidebar.jsx)
The "Create One" button has visible text, so the aria-label="Create New Collection" overrides what screen readers announce and creates a mismatch. Consider either removing the aria-label here or changing the button text to "Create New Collection" to make them consistent.
You can point @aryansinha1908 to this summary. Once all the above are addressed, the PR should be ready to merge. 🐰
|
@aryansinha1908 You are not following the review. |
|
Sorry for the late response. I am implementing the changes but I am currently traveling. I will push the changes when I get a stable internet connection. Again, sorry for the delay. |
- Editted aria labels according to codeRabbit's, copilot's and gemini's suggesstion. - Fixed the indentation - Added arai labels in RecordList.jsx file aswell
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/web-dashboard/src/components/RecordList.jsx`:
- Around line 51-55: Remove aria-hidden from the record-actions container and
make the icon-only button accessible by adding an appropriate aria-label to the
button element (the element with className "btn-icon" inside the
div.record-actions); update the button to include a descriptive aria-label such
as "View record" or context-appropriate text so the ArrowRight icon remains
decorative while screen readers get a meaningful label.
- Around line 23-27: The clickable div with class "record-card" using
onClick={() => onView(record)} is not keyboard-accessible; update the element
(or replace with a semantic <button>) to add role="button", tabIndex={0}, and an
onKeyDown handler that calls onView(record) when Enter or Space is pressed
(handle Space with preventDefault so the page doesn't scroll). Ensure the
existing aria-label remains, and keep the onClick behavior intact so both mouse
and keyboard activate the same onView(record) logic.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: b13f21ab-b05b-4a88-bafe-bab7e09b96cb
📒 Files selected for processing (3)
apps/web-dashboard/src/components/CollectionTable.jsxapps/web-dashboard/src/components/DatabaseSidebar.jsxapps/web-dashboard/src/components/RecordList.jsx
✅ Files skipped from review due to trivial changes (2)
- apps/web-dashboard/src/components/DatabaseSidebar.jsx
- apps/web-dashboard/src/components/CollectionTable.jsx
| <div className="record-actions" aria-hidden="true"> | ||
| <button className="btn-icon"> | ||
| <ArrowRight size={18} /> | ||
| <ArrowRight size={18} aria-hidden="true" /> | ||
| </button> | ||
| </div> |
There was a problem hiding this comment.
aria-hidden="true" on the actions container hides the button from screen readers.
Adding aria-hidden="true" to div.record-actions removes the entire button from the accessibility tree. This is the opposite of Issue #70's requirement—icon-only buttons should have meaningful aria-label attributes, not be hidden entirely.
Remove aria-hidden from the container and add an aria-label to the button instead.
🐛 Proposed fix
- <div className="record-actions" aria-hidden="true">
- <button className="btn-icon">
+ <div className="record-actions">
+ <button className="btn-icon" aria-label="View record details">
<ArrowRight size={18} aria-hidden="true" />
</button>
</div>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className="record-actions" aria-hidden="true"> | |
| <button className="btn-icon"> | |
| <ArrowRight size={18} /> | |
| <ArrowRight size={18} aria-hidden="true" /> | |
| </button> | |
| </div> | |
| <div className="record-actions"> | |
| <button className="btn-icon" aria-label="View record details"> | |
| <ArrowRight size={18} aria-hidden="true" /> | |
| </button> | |
| </div> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/web-dashboard/src/components/RecordList.jsx` around lines 51 - 55,
Remove aria-hidden from the record-actions container and make the icon-only
button accessible by adding an appropriate aria-label to the button element (the
element with className "btn-icon" inside the div.record-actions); update the
button to include a descriptive aria-label such as "View record" or
context-appropriate text so the ArrowRight icon remains decorative while screen
readers get a meaningful label.
|
I made the necessary changes please review them. Sorry for the late response (the internet connection is very weak from my side) |
- Removed aria-hidden="true"
|
no issues @aryansinha1908 I will check by this night. |
|
can we merge? @coderabbitai |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chainLet me check the current state of the changed files before confirming. 🏁 Script executed: Length of output: 6356
✅ All Blocking Issues Are Now Fixed
|
|
@aryansinha1908 can you do one more as coderabbit suggested? |
- Added aria-hashpopup and aria-expanded in the show column menu button for more accessibility - Fixed the inconsistency in the aria-label and the title text in DatabaseSidebar.jsx component
|
I fixed both of the minor issues. |
|
Okay I viewed the changes, and approved, Thank you for the PR @aryansinha1908 All the best ❤️ |
|
Thanks for the review and merge. I really enjoyed contributing. Looking forward to contributing more |
|
@aryansinha1908 I would love if you work on more complex issue rather than this one. If you want to know future scopes of urabackend we have full document of where we are going to work on in upcoming days let me know if you want anything to work on anyissue, you can join discord link in readme |
|
Thanks, I would love to work on something more complex. I will check out the roadmap and join the Discord to see where I can help next. |
🚀 Pull Request Description
Fixes #70
🛠️ Type of Change
🧪 Testing & Validation
Backend Verification:
npm testin thebackend/directory and all tests passed.Frontend Verification:
npm run lintin thefrontend/directory.📸 Screenshots / Recordings (Optional)
✅ Checklist
Built with ❤️ for urBackend.
Summary by CodeRabbit